<template>
	<div class="wrapper">
		<div class="dia">
			<van-search v-model="word" placeholder="请输入关键词" shape="round" :show-action="showAction"
				left-icon="https://mtpospay.com/search.png" class="search">
			</van-search>
			<div class="" @click="onSearch">
				搜索
			</div>
		</div>
		<div class="wrapperCenter">
			<div class="content">
				<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList"
					:immediate-check="false">
					<!-- <van-checkbox-group v-model="terList"> -->
					<!-- <empty v-if="!list.length"></empty> -->
					<div class="dis" v-for="(item,index) in list" :key="index">
						<div class="main">
							<div class="" :class="item.statuesPack==false?'official_full':'official'">
								{{item.publicizeText}}
							</div>
							<div class="full_text" @click="unwind(item,index)">
								{{item.fullText}}
							</div>
							<div class="img_box">
								<div class="dia">
									<div v-for="(items,index) in item.publicizeUrl" :key="index"
										@click="preview(items,index)" class="image_box">
										<template v-if="isVideo(items)">
											<img :src="getThumbnail(items)" alt="Video Thumbnail" class="thumbnail" />
										</template>
										<template v-else>
											<img :src="items" alt="Image" class="thumbnail" />
										</template>
									</div>
									<!-- <img v-for="img in imageList" v-lazy="img" /> -->
									<!-- <img v-lazy="items" alt="" v-for="(items,index) in item.publicizeUrl" :key="index" class="thumbnail"/> -->
									<!-- <van-image width="67" height="67" radius="3"
												:src="images" /> -->
								</div>

							</div>
							<div class="dia copy_box" style="justify-content: flex-end;">
								<div class="dia" @click="copyText(item.publicizeText,0)">
									<div class="dis">
										<img src="/src/assets/index/copy.png" alt="" class="copy_img" />
									</div>
									<div class="">
										复制文案
									</div>
								</div>
								<div class="dia" @click="jurisdiction(item.publicizeUrl)">
									<div class="dis">
										<img src="/src/assets/index/save.png" alt="" class="copy_img" />
									</div>
									<div class="">
										保存图片
									</div>
								</div>
								<div class="dia" @click="jurisdict(item.publicizeUrl,item.publicizeText,1)">
									<div class="dis">
										<img src="/src/assets/index/instant.png" alt="" class="copy_img" />
									</div>
									<div class="">
										一键复制
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- </van-checkbox-group> -->
				</van-list>
			</div>
		</div>
		<van-image-preview v-model:show="show" :images="preImages" :close-on-click-image="false" :showIndex="false"
			:startPosition="imageIndex" @close="closeVideo">
			<template #image="{ src }">
				<!-- 根据 src 是否以视频扩展名结尾来决定显示内容 -->
				<div v-if="isVideo(src)">
					<video style="width: 100%;" controls>
						<source :src="src" />
					</video>
				</div>
				<div v-else>
					<img :src="src" style="width: 100%;" />
				</div>
			</template>
		</van-image-preview>
		<transition name="van-slide-down">
			<div class="pouple" v-if="visible">
				<div class="pouple_box">
					<div class="specification">
					存储空间/照片权限说明
					</div>
					<div class="pouple_font">
						用于在下载场景中读取和写入相册和文件内容,便于用户对图片或视频文件进行保存
					</div>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
	import {
		selectAgentPublicizeInf
	} from '@/api/terminal'
	import {
		host
	} from '@/constant'
	import store from '@/store'
	import {
		showToast
	} from 'vant'
	// import { Lazyload } from 'vant';
	import {
		useRoute,
		useRouter,
		RouterView
	} from 'vue-router'
	import {
		defineComponent,
		reactive,
		toRefs,
		ref,
		onMounted
	} from 'vue';
	export default defineComponent({
		name: 'sateActive',
		setup() {
			// const router = useRouter()
			const state = reactive({
				// active: 0,
				// fullText: '全文',
				word: '',
				// textToCopy: '复制',
				show: false,
				imageIndex: 0,
				images: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
				preImages: [],
				index: 0,
				thumbnails: [],
				videoFrames: {},
				showAction: false,
				pageStart: 1,
				pageSize: 20,
				loading: false,
				finished: false,
				list: [],
				visible: false
				// posList: []
			})
			//点击展开全文
			const unwind = (item, index) => {
				if (item.statuesPack == false) {
					state.list[index].statuesPack = true
					state.list[index].fullText = '收起'
				} else {
					state.list[index].statuesPack = false
					state.list[index].fullText = '全文'
				}
				// console.log(state.active)
			}
			//顶部搜索框
			const onSearch = () => {
				console.log('关闭')
			}
			//获取数据
			const getList = () => {
				let parames = {
					pageSize: state.pageSize,
					pageStart: state.pageStart
				}
				selectAgentPublicizeInf(parames).then(res => {
					if (res.data.records.length != 0) {
						if (res.data.records.size < 10) {
							state.finished = true
							state.loading = false
						} else {
							state.pageStart++
							state.finished = false
							state.loading = false
						}
						for (let i in res.data.records) {
							res.data.records[i].publicizeUrl = res.data.records[i].publicizeUrl.split(
								',')
						}

						console.log(res.data.records)
						for (let i in res.data.records) {
							res.data.records[i]['statuesPack'] = false
							res.data.records[i]['fullText'] = '全文'
						}
						state.list = state.list.concat(res.data.records)
					} else {
						state.finished = true
						state.loading = false
					}
				})
				// console.log(host)
				// state.images = [
				// 	'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
				// 	'http://xhbhs.cn:8888/xiaomao.mp4',
				// 	'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
				// ]
			}

			getList()
			//预览图片
			const preview = (e, index) => {
				state.show = true
				state.preImages = []
				state.preImages.push(e)
				state.imageIndex = index
				// console.log(e,index)
			}
			//保存图片检查权限
			const jurisdiction = (e) => {
				const imgUrl = e
				const permission = 'android.permission.WRITE_EXTERNAL_STORAGE' // 要检查的权限
				plus.android.checkPermission(
					permission,
					granted => {
						// 0(已获取权限) -1未获取权限
						// console.log(granted.checkResult)
						if (granted.checkResult == -1) {
							state.visible = true
						}
					},
					error => {
						console.error('Error checking permission:', error.message)
					}
				)
				plus.android.requestPermissions(['android.permission.WRITE_EXTERNAL_STORAGE'],
					(e) => {
						//关闭
						state.visible = false
						if (e.granted.length > 0) {
							//执行你有权限后的方法
							// console.log('afterReadUploadImg')
							downloadImage(imgUrl)
						}
					})
			}
			//一键保存图片权限检查
			const jurisdict = (e, text, type) => {
				const imagurl = e
				const textFont = text
				const types = type
				const permission = 'android.permission.WRITE_EXTERNAL_STORAGE' // 要检查的权限
				plus.android.checkPermission(
					permission,
					granted => {
						// 0(已获取权限) -1未获取权限
						// console.log(granted.checkResult)
						if (granted.checkResult == -1) {
							state.visible = true
						}
					},
					error => {
						console.error('Error checking permission:', error.message)
					}
				)
				plus.android.requestPermissions(['android.permission.WRITE_EXTERNAL_STORAGE'],
					(e) => {
						//关闭
						state.visible = false
						if (e.granted.length > 0) {
							//执行你有权限后的方法
							// console.log('afterReadUploadImg')
							replication(imagurl, textFont, types)
						}
					})
			}
			//
			// const onChange = (newIndex) => {
			// 	state.index = newIndex;
			// }
			//一件保存视频和图片
			const replication = (e, text, type) => {
				// state.visible = true
				copyText(text, type)
				// console.log(e)
				downloadImage(e)
			}
			//关闭视频暂停视频
			const closeVideo = () => {
				// console.log('关闭')
				const videoElement = document.querySelector('video');
				if (videoElement) {
					videoElement.pause();
					videoElement.currentTime = 0;
				}
			}
			//通信保存图片
			const downloadImage = (imageUrl) => {
				console.log('aaaaaaaaaaaaaaaa', imageUrl)
				window.uni.postMessage({
					data: {
						imageUrl: imageUrl,
						type: 'saveImage',
					}
				});
			}
			//判断是不是视频
			const isVideo = (url) => {
				return url.match(/\.(mp4|webm|ogg)$/);
			}
			//复制
			const copyText = (e, type) => {
				const textarea = document.createElement('textarea');
				textarea.value = e;
				document.body.appendChild(textarea);
				textarea.select();
				document.execCommand('copy');
				document.body.removeChild(textarea);
				if (type != 1) {
					showToast('复制成功！');
				}

			}
			//获取视频第一帧
			const getThumbnail = (videoUrl) => {
				return new Promise((resolve, reject) => {
					const videoElement = document.createElement('video');
					videoElement.src = videoUrl;
					videoElement.addEventListener('loadedmetadata', () => {
						const canvas = document.createElement('canvas');
						canvas.width = videoElement.videoWidth;
						canvas.height = videoElement.videoHeight;
						const ctx = canvas.getContext('2d');
						videoElement.currentTime = 0;
						videoElement.play().then(() => {
							return new Promise((innerResolve) => {
								videoElement.pause();
								ctx.drawImage(videoElement, 0, 0, canvas.width,
									canvas
									.height);
								resolve(canvas.toDataURL());
								innerResolve();
							});
						}).catch(reject);
					});
				});
			}
			// mounted({
			// 	this.$Lazyload = Lazyload({
			// 	      lazyComponent: true
			// 	    });
			// })
			return {
				...toRefs(state),
				unwind,
				onSearch,
				preview,
				// onChange,
				downloadImage,
				closeVideo,
				isVideo,
				getThumbnail,
				getList,
				copyText,
				replication,
				jurisdiction,
				jurisdict
				// getVideoFrame,
				// captureVideoFrame,
			}
		}
	})
</script>
<style scoped lang="scss">
	.wrapper {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #FFF9F9;

		.search {
			width: 328px;
			// position: fixed;
			background-color: #FFF9F9 !important;
			// top: 0;
		}

		.main {
			width: 92%;
			background-color: #fff;
			border-radius: 8px;
			padding: 16px 16px;
			box-sizing: border-box;

			.official {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 14px;
				color: #3D3D3D;
				// width: 100px;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 18px;

			}

			.official_full {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 14px;
				color: #3D3D3D;
				line-height: 18px;
				// width: 100px;
			}

			.full_text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 12px;
				color: #FF8F8F;
				margin-top: 10px;
			}

			.img_box {
				margin-top: 12px;
			}

			.copy_box {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 10px;
				color: #333333;
				margin-top: 10px;

				.copy_img {
					width: 14px;
					height: 14px;
					margin-right: 6px;
				}

				.copy_img:nth-child(1) {

					margin-left: 16px;
				}
			}

		}
	}




	:deep() .van-search__content {
		background-color: #FFECEC !important;
	}

	.wrapperCenter {
		height: 100vh;
		// margin-top: 200px;
		overflow: scroll;

		.content {

			// padding-bottom:50px;
			// box-sizing: border-box;
			.main {
				width: 339px;
				// height: 144px;
				background: #FFFFFF;
				box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
				border-radius: 6px;
				padding: 10px 10px;
				box-sizing: border-box;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 14px;
				color: #333333;
				margin-top: 12px;

				.thumbnail {
					width: 80px;
					height: 66px;
					border-radius: 2px;
				}

				.main_d {
					width: 280px;
					display: flex;
					justify-content: space-between;
				}

				.institution {
					margin-top: 2px;
					margin-left: 12px;
				}

				.condition {
					margin-top: 4px;
					margin-left: 12px;
				}
			}
		}
	}

	.pouple {
		display: flex;
		position: absolute;
		top: 4px;
		align-items: center;
		justify-content: center;

		.pouple_box {
			width: 92%;
			background-color: #fff;
			padding: 8px 12px 12px 12px;
			border-radius: 4px;
			line-height: 18px;
		}

		.pouple_font {
			margin-top: 6px;
			font-size: 14px;
		}

		.specification {
			font-size: 16px;
			font-weight: bold;
		}
	}

	.image_box {

		margin-right: 12px;
	}
</style>